<script setup>
import { computed, inject, reactive, toRefs } from "vue";

// const count = inject("count");
// const updateCount = inject("updateUpdate");

// definProps: 接收父组件传递的数据
const props = defineProps({
    money: Number,
    car: String
});

// 得到emit函数,显性声明事件名称
const emit = defineEmits(['changeMoney', 'changeCar']);
const change = () => {
    emit("changeMoney", 10)
}
const changes = () => {
    emit("changeCar", "劳斯莱斯")
};

// 使用props
console.log(props.money, "父组件传递过来的money");

// reactive 的结构赋值
const user = reactive({
    name: "tom",
    age: 18
});
console.log(user);
// 这样的解构赋值,可以实现内容的展示,但是没有办法实现数据的响应式更新
// const { name, age } = user;

// 使用toRefs后可以实现数据的实时响应
const { name, age } = toRefs(user);

</script>

<template>
    <div>
        <h3 @click="change">我是子组件</h3>
        <div @click="[changes,]">{{ money }} ----- {{ car }}</div>
        <p>姓名：{{ user.name }}</p>
    <p>年龄：{{ user.age }} <button @click="user.age++">一年又一年</button></p>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }} <button @click="age++">一年又一年</button></p>
    </div>
</template>